<template>
  <div class="test-container">
    <div id="coze-chat" ref="chatContainer"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const chatContainer = ref<HTMLElement | null>(null)

onMounted(() => {
  // 动态加载Coze SDK
  const script = document.createElement('script')
  script.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.6/libs/cn/index.js'
  script.onload = () => {
    // SDK加载完成后初始化
    const cozeWebSDK = new (window as any).CozeWebSDK.WebChatClient({
      config: {
        bot_id: '7490441832921301026',
        isIframe: false,
      },
      componentProps: {
        title: '中医云健康助手', // 自定义标题
        uploadable: true, // 开启文件上传功能
        width: 1200, // 增加PC端窗口宽度
        el: chatContainer.value, // 设置聊天框容器
        showFloatButton: true, // 显示悬浮球
        autoOpen: false, // 不自动打开对话框
        position: 'center',
        height: '80%',
        style: {
          position: 'fixed',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          zIndex: 1000
        }
      },
      auth: {
        type: 'token',
        token: 'pat_jAk6eT9zlHlfflzpLdLM33Wt6qgpqHnmqADyf2I2SaZsVkJHB2BHSv9ho77WO3kd',
        onRefreshToken: function () {
          return 'pat_jAk6eT9zlHlfflzpLdLM33Wt6qgpqHnmqADyf2I2SaZsVkJHB2BHSv9ho77WO3kd'
        }
      },
      userInfo: {
        id: 'user123',
        url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
        nickname: '用户',
      },
      ui: {
        base: {
          icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
          layout: 'pc',
          lang: 'zh-CN',
          zIndex: 1000,
        },
        header: {
          isShow: true,
          isNeedClose: true,
        },
        asstBtn: {
          isNeed: true,
        }
      }
    })

  }
  document.head.appendChild(script)
})
</script>

<style scoped>
.test-container {
  width: 100%;
  height: 100%;
  position: relative;
}

#coze-chat {
  width: 100%;
  height: 100%;
  position: relative;
}

:deep(.coze-chat-container) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1000 !important;
  width: 1500px !important; /* 确保聊天框宽度 */
}
</style>